<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS相对单位</title>
	</head>
	<body>
		<!--绝对单位  px 
		显示器的分辨率 可以理解为在横向和纵向划分为多少个格子
		1366x768
		在pc端里面 1px = 1个显示器的格子-->
		<!--em 相对单位-->
		<style type="text/css">
			
			html{
				font-size: 20px;
			}
			body{
				font-size: 30px;
			}
			.baba{
				width: 10rem;
				height: 10rem;
				background: skyblue;
				font-size: 40px;
			}
			/*em单位实际上是参考最近的参考点(自身开始,如果没有对自身设置具体的值,则继承上一级的font-size的值作为参考)
			font-size的值进行对应的换算*/
		</style>
		<div class="baba">
			
		</div>
		<!--r(root)em 相对单位 
		rem他的参考点永远是html的font-size值-->
		
	</body>
</html>
